<template>
  <el-dialog
    title="健康问题详情"
    v-model="dialogVisible"
    width="600px"
    custom-class="health-detail-dialog"
  >
    <div class="detail-content">
      <div class="student-info">
        <div class="info-header">
          <el-avatar 
            :size="64" 
            :style="{ backgroundColor: '#409EFF', color: '#fff' }"
          >
            {{ student.name?.[0] || '学' }}
          </el-avatar>
          <div class="basic-info">
            <h3>{{ student.name }}</h3>
            <p>{{ student.class }} | 学号：{{ student.id }}</p>
          </div>
          <el-tag :type="getHealthStatus(student.healthIssue).type" class="status-tag">
            {{ getHealthStatus(student.healthIssue).text }}
          </el-tag>
        </div>
      </div>
      
      <el-divider />
      
      <div class="health-details">
        <h4>健康问题详情</h4>
        
        <!-- 心理问题详情 -->
        <div v-if="student.healthIssue === '心理问题'" class="detail-section">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="问题类型">抑郁倾向</el-descriptions-item>
            <el-descriptions-item label="发现时间">2024-03-15</el-descriptions-item>
            <el-descriptions-item label="严重程度">中度</el-descriptions-item>
            <el-descriptions-item label="是否就医">是</el-descriptions-item>
          </el-descriptions>
          <div class="assessment-result">
            <h5>心理评估结果</h5>
            <el-progress type="dashboard" :percentage="75" status="warning" />
            <p>最近一次心理评估显示存在中度抑郁倾向，建议持续关注。</p>
          </div>
        </div>
        
        <!-- 视力问题详情 -->
        <div v-if="student.healthIssue === '视力问题'" class="detail-section">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="左眼视力">4.5</el-descriptions-item>
            <el-descriptions-item label="右眼视力">4.6</el-descriptions-item>
            <el-descriptions-item label="上次检查">2024-02-20</el-descriptions-item>
            <el-descriptions-item label="视力变化">下降0.2</el-descriptions-item>
          </el-descriptions>
          <div class="vision-chart">
            <h5>视力变化趋势</h5>
            <el-progress :percentage="90" :format="() => '4.5'" />
            <el-progress :percentage="92" :format="() => '4.6'" />
          </div>
        </div>
        
        <!-- 颈椎问题详情 -->
        <div v-if="student.healthIssue === '颈椎问题'" class="detail-section">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="症状">颈部疼痛</el-descriptions-item>
            <el-descriptions-item label="持续时间">2个月</el-descriptions-item>
            <el-descriptions-item label="是否就医">是</el-descriptions-item>
            <el-descriptions-item label="治疗状态">复健中</el-descriptions-item>
          </el-descriptions>
          <div class="treatment-progress">
            <h5>康复进度</h5>
            <el-steps :active="2" finish-status="success">
              <el-step title="初步诊断" description="已完成" />
              <el-step title="治疗方案" description="进行中" />
              <el-step title="康复训练" description="待开始" />
            </el-steps>
          </div>
        </div>
        
        <!-- 睡眠问题详情 -->
        <div v-if="student.healthIssue === '睡眠问题'" class="detail-section">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="平均睡眠">5.5小时</el-descriptions-item>
            <el-descriptions-item label="入睡时间">23:30后</el-descriptions-item>
            <el-descriptions-item label="睡眠质量">较差</el-descriptions-item>
            <el-descriptions-item label="是否就医">否</el-descriptions-item>
          </el-descriptions>
          <div class="sleep-analysis">
            <h5>睡眠质量分析</h5>
            <el-progress type="circle" :percentage="60" status="warning" />
            <p>近期睡眠质量评分偏低，建议调整作息时间。</p>
          </div>
        </div>
        
        <!-- 营养问题详情 -->
        <div v-if="student.healthIssue === '营养不良'" class="detail-section">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="BMI指数">17.5</el-descriptions-item>
            <el-descriptions-item label="体重状态">偏瘦</el-descriptions-item>
            <el-descriptions-item label="营养评估">营养不足</el-descriptions-item>
            <el-descriptions-item label="是否就医">否</el-descriptions-item>
          </el-descriptions>
          <div class="nutrition-analysis">
            <h5>营养状况评估</h5>
            <el-progress type="circle" :percentage="70" status="warning" />
            <p>建议增加营养摄入，保持均衡饮食。</p>
          </div>
        </div>
      </div>
      
      <div class="suggestion-section">
        <h4>建议措施</h4>
        <el-card class="suggestion-card" shadow="never">
          <template #header>
            <div class="suggestion-header">
              <i class="el-icon-warning-outline"></i>
              <span>健康建议</span>
            </div>
          </template>
          <ul class="suggestion-list">
            <li v-for="(suggestion, index) in getHealthSuggestions(student.healthIssue)" :key="index">
              {{ suggestion }}
            </li>
          </ul>
        </el-card>
      </div>
    </div>
    
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="handlePrint">打印报告</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue';

const props = defineProps({
  student: {
    type: Object,
    required: true
  }
});

const dialogVisible = ref(false);

const getHealthStatus = (issue) => {
  const statusMap = {
    '心理问题': { type: 'danger', text: '需要关注' },
    '视力问题': { type: 'warning', text: '需要改善' },
    '颈椎问题': { type: 'warning', text: '需要治疗' },
    '睡眠问题': { type: 'warning', text: '需要调整' },
    '营养不良': { type: 'warning', text: '需要改善' },
    '无': { type: 'success', text: '健康' }
  };
  return statusMap[issue] || { type: 'info', text: '未知' };
};

const getHealthSuggestions = (issue) => {
  const suggestions = {
    '心理问题': [
      '建议定期进行心理咨询和辅导',
      '参加学校组织的心理健康活动',
      '保持良好的社交活动和运动习惯',
      '与家人和朋友多交流沟通',
      '适当调整学习压力，保持积极心态'
    ],
    '视力问题': [
      '每天保证充足的休息时间，避免长时间用眼',
      '保持正确的坐姿和用眼习惯',
      '定期进行视力检查',
      '适当进行眼部保健操',
      '注意调整电子设备使用时间'
    ],
    '颈椎问题': [
      '保持正确的坐姿和生活习惯',
      '进行专业的颈椎康复训练',
      '适当进行颈部运动和按摩',
      '避免长时间低头和不良姿势',
      '建议使用符合人体工程学的椅子和桌子'
    ],
    '睡眠问题': [
      '规律作息，保持固定的睡眠时间',
      '睡前避免使用电子设备',
      '创造良好的睡眠环境',
      '适当运动，但避免睡前剧烈运动',
      '必要时寻求医生帮助'
    ],
    '营养不良': [
      '制定合理的饮食计划',
      '保证每日三餐规律',
      '增加蛋白质和维生素的摄入',
      '适当进行体育锻炼',
      '定期进行身体检查和营养评估'
    ]
  };
  return suggestions[issue] || ['暂无具体建议'];
};

const show = () => {
  dialogVisible.value = true;
};

const handlePrint = () => {
  window.print();
};

defineExpose({
  show
});
</script>

<style lang="less" scoped>
.health-detail-dialog {
  :deep(.el-dialog__body) {
    padding: 20px 30px;
  }
}

.detail-content {
  .student-info {
    .info-header {
      display: flex;
      align-items: center;
      gap: 20px;
      
      .basic-info {
        flex: 1;
        h3 {
          margin: 0 0 8px 0;
          font-size: 20px;
        }
        p {
          margin: 0;
          color: #666;
        }
      }
      
      .status-tag {
        font-size: 14px;
      }
    }
  }
  
  .health-details {
    margin-top: 20px;
    
    h4 {
      color: #409EFF;
      margin-bottom: 15px;
    }
    
    .detail-section {
      margin: 15px 0;
      
      h5 {
        margin: 15px 0 10px 0;
        color: #606266;
      }
      
      .assessment-result,
      .vision-chart,
      .treatment-progress,
      .sleep-analysis,
      .nutrition-analysis {
        margin-top: 20px;
        text-align: center;
        
        p {
          margin-top: 10px;
          color: #606266;
        }
      }
      
      :deep(.el-progress) {
        margin-bottom: 10px;
      }
      
      :deep(.el-steps) {
        margin-top: 20px;
      }
    }
  }
  
  .suggestion-section {
    margin-top: 20px;
    
    h4 {
      color: #67c23a;
      margin-bottom: 15px;
    }
    
    .suggestion-card {
      background-color: #f8f9fa;
      
      .suggestion-header {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #67c23a;
      }
      
      .suggestion-list {
        margin: 0;
        padding-left: 20px;
        
        li {
          margin-bottom: 8px;
          color: #606266;
          
          &:last-child {
            margin-bottom: 0;
          }
        }
      }
    }
  }
}

.dialog-footer {
  text-align: right;
  margin-top: 20px;
}
</style> 